<template>
  <div class="fixed">
    <div class="btn" @click="change">
      <img v-show="!show" src="../assets/img/1/btn.png" alt="" />
      <img v-show="show" src="../assets/img/1/btn2.png" alt="" />
    </div>
    <el-dialog
      :visible.sync="show"
      center
      :modal="false"
      :append-to-body="true"
      :show-close="false"
      :close-on-click-modal="false"
      :lock-scroll="false"
      fullscreen
    >
      <NewScroll class="bg" />
      <div class="left">
        <img class="hudie" src="../assets/images/img04.png" alt="" />
        <img class="topTree" src="../assets/images/m_tree01.png" alt="" />
        <img class="leftTree" src="../assets/images/m_tree03.png" alt="" />
      </div>
      <div class="mid">
        <p @click="toTop">{{ $t("user.home") }}</p>
        <p @click="toUser">{{ $t("user.userMid") }}</p>
        <p @click="toUser">{{ $t("user.wallet") }}</p>
        <p @click="toUser">{{ $t("user.safety") }}</p>
        <p @click="toUser">{{ $t("user.renZheng") }}</p>
      </div>
      <div class="right">
        <img class="bj" src="../assets/images/img05_1.png" alt="" />
        <img class="sj" src="../assets/images/img05_2.png" alt="" />
        <img class="rightTree" src="../assets/images/m_tree02.png" alt="" />
      </div>
      <NewScroll class="bg" />
      <NewScroll class="bg" />
    </el-dialog>
  </div>
</template>

<script>
const NewScroll = () => import("./scroll/NewScroll.vue");
export default {
  data() {
    return {
      show: false, //开关显示
      toU:true,
    };
  },
  components: {
    NewScroll,
  },
  methods: {
    change() {
      //打开关闭弹窗
      this.show = !this.show;
    },
    toUser() {
      this.$router.push("/user");
      localStorage.setItem('to',this.toU);
    },
    toTop() {
      document.documentElement.scrollTop = 0;
      this.show = !this.show;
    },
  },
};
</script>

<style lang="less" scoped>
.left {
  .topTree {
    position: absolute;
    left: 20%;
    top: 0;
  }
  .hudie {
    position: absolute;
    top: 10%;
    left: 13%;
    animation: fly 3s linear infinite;
  }
  @keyframes fly {
    20% {
      top: 10.5%;
      left: 13.5%;
    }
    40% {
      top: 11%;
      left: 14%;
    }
    60% {
      top: 10%;
      left: 14%;
    }
    80% {
      top: 10.5%;
      left: 13.5%;
    }
  }
  .leftTree {
    position: absolute;
    left: 5%;
    bottom: 5%;
    z-index: 500;
  }
}
.right {
  // position: relative;
  .bj,
  .sj {
    position: absolute;
    right: 20%;
    bottom: 3%;
    z-index: 500;
  }
  .rightTree {
    position: absolute;
    right: 5%;
    bottom: 10%;
    z-index: 500;
  }
}
.mid {
  z-index: 500;
  position: absolute;
  left: 45%;
  top: 25%;
  font-size: 40px;
  font-weight: 900;
  p {
    cursor: pointer;
    margin-top: 10px;
    -webkit-text-stroke: 2px #fff;
  }
  p:hover {
    color: orange;
  }
}
.fixed {
  position: relative;
  /deep/.el-dialog__body {
    width: 1200px;
    margin: 0 auto;
  }
}
/deep/.el-dialog {
  // width: 100%;
  // height: 100%;
  background-color: #7fc36e;
  padding: 0;
  overflow: hidden;
}
/deep/.el-dialog__header {
  display: none;
  padding: 0;
  height: 0;
}
.btn {
  position: relative;
  width: 75px;
  height: 75px;
  @media screen and (max-width: 420px) {
    width: 50px;
    height: 50px;
  }
  img {
    position: absolute;
    right: -3px;
    width: 100%;
    height: 100%;
  }
}
</style>>